<template>
  <div class="home_main">
    <div class="h_hd">
      <div class="h_hd_main">
        <img class="h_hd_main_img" :src="avatarUrl" alt="">
        <div class="h_hd_main_txt">
          <div class="h_hd_main_name">你好，{{name}}</div>
          <div class="h_hd_main_tost">欢迎使用西安市智慧政务 — 大救助一门受理系统</div>
        </div>
      </div>
    </div>
    <div class="h_main">
      <div class="h_mainhtc">
        <div class="hMian_list">
          <li class="hMian_item">
            <router-link to="/approval/wait">
              <div class="hMian_item_t">
                {{list[0].name}}
              </div>
              <div class="hMian_item_b">
                {{list[0].task}}个任务
              </div>
            </router-link>
          </li>
        <li class="hMian_item hMian_itemHover" >
          <router-link to="/approval/joined">
            <div class="hMian_item_t">
              {{list[1].name}}
            </div>
            <div class="hMian_item_b">
              {{list[1].task}}个任务
            </div>
          </router-link>
        </li>
        </div>
        <div class="hMian_content">
          <div class="content_bot">
            <div class="content_bot_lf">
              <div class="content_t_hd">
                <div class="content_t_hd_lf">
                  工作动态
                </div>
                <div class="content_t_hd_lr">
                  <a @click="more(2)">
                    更多<i class="el-icon-d-arrow-right"></i>
                  </a>
                </div>
              </div>
              <ul>
                <li class="content_bot_item" @click="detail(e)" v-for="(e,i) in workStatusList" :key="i">
                  <div class="content_itemLf">
                    <div class="content_itemLf_page"></div>
                    <div class="content_itemLf_text">{{e.title}}</div>
                  </div>
                  <div class="content_itemLr">
                    {{e.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}
                  </div>
                </li>
              </ul>
            </div>
            <div class="content_bot_lr">
              <div class="content_t_hd">
                <div class="content_t_hd_lf">
                  通知公告
                </div>
                <div class="content_t_hd_lr">
                  <a @click="more(2)">
                  更多<i class="el-icon-d-arrow-right"></i>
                  </a>
                </div>
              </div>
              <div>
                <ul>
                  <li class="content_bot_item" @click="detail(e)" v-for="(e,i) in noticeList" :key="i">
                    <div class="content_itemLf">
                      <div class="content_itemLf_page"></div>
                      <div class="content_itemLf_text">{{e.title}}</div>
                    </div>
                    <div class="content_itemLr">
                        {{e.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryTaskCount, getNews } from "@/api/home";
import { queryPage, queryInfo } from "@/api/news";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["name","avatar"])
  },
  data() {
    return {
      downloadURL: process.env.BASE_API + "/file/",
      avatarUrl: null,
      listQuery: {
        page: 1,
        size: 10,
        searchStr: null,
        type: null,
        sort: "+id"
      },
      list: [
        { name: "我的待办", key: "wait", task: 0 },
        { name: "我的经办", key: "joined", task: 0 }
      ],
      workStatusList: [],
      noticeList: []
    };
  },
  created() {
    this.getTaskCount();
    this.fetchData();
    this.avatarUrl = this.downloadURL+this.avatar
  },
  methods: {
    detail(e) {
      this.$router.push({
        path: "/news/newdetail",
        query: { action: "view", id: e.id }
      });
    },
    getTaskCount() {
      queryTaskCount().then(res => {
        this.list[0].task = res.data.wait;
        this.list[1].task = res.data.joined;
      });
    },
    fetchData() {
      getNews().then(response => {
        this.workStatusList = response.data.work
        this.noticeList = response.data.announcement
      });
    },
    more(type){
      this.$router.push({
        name: "moreNews",
        props: () => ({ type: type})
      });
    }
  }
};
</script>
<style scoped>
.content_t_bd_lf {
  width: 300px;
  border: 1px solid #ccc;
  height: 270px;
  overflow: hidden;
  margin-top: 20px;
}

.content_t_bd_lr {
  width: calc(100% - 370px);
  height: 300px;
  overflow: hidden;
}

.content_t_bd {
  display: flex;
  justify-content: space-between;
}

.content_itemLf {
  font-size: 16px;
  color: #333;
  width: 80%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.content_itemLf_text {
  width: calc(100% - 15px);
  height: 22px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 670px;
}

.content_itemLf_page {
  width: 5px;
  height: 5px;
  background-color: #aaa;
  border-radius: 50%;
  margin-right: 10px;
}

.content_itemLr {
  font-size: 14px;
  color: #aaa;
  margin-right: 5px;
}

.content_bot_item {
  height: 50px;
  /* width: 100%; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  overflow: hidden;
  border-bottom: 1px dashed #ccc;
  cursor: pointer;
}

.content_bot_lf {
  width: calc(64% - 10px);
  overflow: hidden;
}

.content_bot_lr {
  width: 33%;
  overflow: hidden;
}

.content_t_hd_tlr {
  margin-right: 15px;
}

.content_t_hd_lf {
  font-size: 18px;
  color: #333;
  margin-left: 20px;
}

.content_t_hd_lr {
  font-size: 15px;
  color: #676a6c;
  margin-right: 5px;
}

.content_t_hd {
  height: 45px;
  width: 100%;
  background-color: rgb(246, 246, 246);
  border-top: 2px solid rgb(210, 40, 40);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content_top {
  margin-left: 25px;
  width: calc(100% - 50px);
  height: 300px;
  overflow: hidden;
  margin-top: 20px;
}

.content_bot {
  margin-left: 25px;
  width: calc(100% - 50px);
  height: 300px;
  overflow: hidden;
  margin-top: 35px;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
}

.hMian_item_t {
  margin-bottom: 5px;
  font-size: 20px;
  color: #333;
  width: 100%;
  height: 22px;
  line-height: 22px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

.hMian_item_b {
  font-size: 16px;
  color: #3ba4f5;
  height: 22px;
  width: 100%;
  text-align: center;
  line-height: 22px;
  margin-top: 5px;
  overflow: hidden;
  cursor: pointer;
}

.hMian_item {
  width: 50%;
  height: 151px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hMian_itemHover::after {
  position: absolute;
  left: 0;
  height: 100px;
  top: 25px;
  width: 1px;
  background-color: #ccc;
  content: "";
}

.hMian_content {
  min-height: 300px;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  margin-top: 25px;
  margin-bottom: 50px;
}

.hMian_list {
  height: 151px;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  margin-top: 25px;
  display: flex;
}

.h_mainhtc {
  width: calc(100% - 64px);
  margin-left: 32px;
  overflow: hidden;
}

.h_main {
  background-color: #f3f3f4;
  min-height: 500px;
  width: 100%;
  overflow: hidden;
}

.h_hd_main_txt {
  margin-left: 20px;
  height: 72px;
}

.h_hd_main_tost {
  color: #676a6c;
  font-size: 16px;
  height: 16px;
  line-height: 16px;
  margin-top: 20px;
}

.h_hd_main_name {
  margin-top: 5px;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.85);
  height: 24px;
  line-height: 24px;
}

.h_hd_main_img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.h_hd_main {
  display: flex;
  align-items: center;
  margin-top: 36px;
  margin-left: 42px;
}

.h_hd_title {
  margin-bottom: 16px;
  font-size: 14px;
  color: #aaa;
  margin-left: 32px;
  margin-top: 16px;
}

.h_hd {
  width: 100%;
  height: 153px;
  overflow: hidden;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.home_main {
  width: 100%;
  height: calc(100% - 100px);
  background-color: #f3f3f4;
  overflow: hidden;
}
</style>